<script setup lang="ts">
import { CloseOne } from '@icon-park/vue-next'
import { VideoType } from '@renderer/type'
import useVideo from '@renderer/composables/useVideo'
const { video } = defineProps<{ video: VideoType; index: number }>()
const { removeItem, bgColor } = useVideo()
</script>

<template>
  <section class="video" :style="`--process:${video.progress}%; --bgColor:${bgColor(video)}`">
    <div class="title z-10">{{ video.name }}--{{ video.state }}</div>
    <div class="icon" @click="removeItem(index)"><close-one theme="outline" size="12" /></div>
  </section>
</template>

<style lang="less" scoped>
.video {
  @apply bg-white px-3 py-1 rounded-lg mb-2 mx-3 text-xs text-slate-600
  flex justify-between items-center relative;
  // background-color: var(--bgColor);
  &::before {
    content: '';
    @apply absolute top-0 bottom-0 left-0 right-0 z-0 rounded-lg;
    width: var(--process);
    background-color: var(--bgColor);
  }
  .title {
    @apply truncate;
  }

  .icon {
    @apply text-slate-500 opacity-50 hover:scale-150 duration-300 hover:text-red-500 hover:opacity-90 cursor-pointer;
  }
}
</style>
